/**
 * App hook
 */
import { Vue } from '+/deps/env'
import hook from '+/deps/hook'
import { utils } from './util'
import template from './template.html'
import ElementUI from 'element-ui'
import components from '@/modules'
import i18n from '@/widgets/i18n'
import { setAppData, localStorage, sessionStorage } from '@/deps/utils'
import './element-variables.scss'
import './style.scss'
import '../deps/directive'
import '../libs/iconfont/iconfont.css';
import 'leaflet/dist/leaflet.css'
import '@supermap/iclient-leaflet/dist/iclient-leaflet.min.css'
import '@/libs/plugins/leaflet-geoman/2.14.2/leaflet-geoman.css';
// 安装组件
Vue.use(ElementUI)
Object.keys(components).forEach(k => Vue.component(k, components[k]))
Object.keys(utils).forEach(k => {
  Vue.prototype[`$${k}`] = utils[k]
})
/**
 * 统一添加弹层控制
 * */
Vue.component('el-dialog', {
  extends: ElementUI.Dialog,
  props: {
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: true
    }
  }
});
/**
 * 统一添加抽屉控制
 * */
Vue.component('el-drawer', {
  extends: ElementUI.Drawer,
  props: {
    wrapperClosable: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    }
  }
});
/**
 * 统一添加分页控制
 * */
Vue.component('el-pagination', {
  extends: ElementUI.Pagination,
  props: {
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    },
    layout: {
      type: String,
      default: 'sizes, total, prev, pager, next'
    },
    background: {
      type: Boolean,
      default: true
    }
  }
});
hook('switch@route', function (options) {
  const userData = sessionStorage('userData')
  let token = userData && userData.Authorization ? userData.Authorization : '1234'
  setAppData('$defaultRequestHeader', { Authorization: token })
  setAppData('$defaultRequestHeader', { lang: localStorage('localeLanguage') || 'zh' })
  setAppData('$defaultRequestHeader', { tenantId: 'JYCATV' })
})
// 数据挂钩
hook('prepare@app', function () {
  return {
    appData: null,
    routerOptions: {}
  }
})
// App component挂钩，将component configs传递给resolve完成初始化
hook('create@app', function (options) {
  // Set default request params
  return {
    i18n,
    template,
    data() {
      return {
        noMenu: true,
        themeClass: localStorage('themeClass') || 'theme-black'
      }
    },
    computed: {
      isCollapse() {
        return this.$store.state.isCollapse
      },
      notLogin() {
        return this.$route.name !== 'login' && this.$route.name !== 'registry'
      }
    },
    mounted() {
      document.body.className = this.themeClass
      this.$bus.$on('CHANGE_NO_MENU', (val) => {
        this.noMenu = val
      })
      this.$bus.$on('CHANGE_THEME', () => {
        let themeClass = localStorage('themeClass')
        this.themeClass = themeClass === 'theme-black' ? 'theme-white' : 'theme-black'
        document.body.className = this.themeClass
        localStorage('themeClass', this.themeClass)
      })
    }
  }
})
